<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位：相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流 
			   绝对定位：按照页面顶角进行定位，在父级元素中，首先按照父级定位，脱离文档流
			*/
			div{
				width: 300px;
				height: 300px;
				background: #f00;
				border-radius: 50%;
				position: relative;
				top: 0;
				left: 0;
			}
			/* 需求：5个圆，每个圆颜色都不同 
			  类选择器使用问题：常用模式:3个别名
			       html语法：  class="别名1 别名2 别名3..."
				   css语法：   .别名1{}
			*/
		   .d1{
			   background: #ffaec8;
		   }
		   .d2{
		   			   background: #ffaa7f;
		   }
		   .d3{
		   			   background: #ffff7f;
		   }
		   .d4{
		   			   background: #aaff7f;
		   }
		   .d5{
		   			   background: #aaaaff;
		   }
		   
		</style>
	</head>
	<body>
		<!-- 创建4个div 1个p -->
		<div class="d d1"></div>
		<div class="d d2"></div>
		<div class="d d3"></div>
		<p class="d d4"></p>
		<div class="d d5"></div>
	</body>
</html>